<template>
  <div class="pages manage">
    <div class="pageLevel" v-if="!sub">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form>
          <el-form-item label="手机号:" label-width="100px">
            <el-input v-model="selectdata.phone" size="mini" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="等级:" label-width="60px">
            <el-select size="small" v-model="selectdata.level" multiple placeholder="请选择">
              <el-option size="small" v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册门店:" label-width="100px">
            <el-input v-model="selectdata.regStore" size="mini" placeholder="请输入注册门店"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" size="mini" @click="searchSelect" class="Button">查询</el-button>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <a href="javascript:;" v-if="setRole('新增会员')" class="file">
              批量导入
              <input ref="uploading" @change="uploading($event)" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
            </a>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button size="mini" type="primary" v-if="setRole('新增会员')" @click="donwloadMb()">下载模板</el-button>
          </el-form-item>
          <el-form-item label="" class="serchAdd" label-width="15px">
            <el-button type="primary" size="mini" v-if="setRole('新增会员')" @click="routerPush()">新增会员</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="fonts">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"> </el-table-column>
          <el-table-column prop="memberCode" label="会员编码" align="center" width="150"> </el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
          <el-table-column prop="gender" label="性别" align="center" :formatter="sex"></el-table-column>
          <el-table-column prop="levelName" label="等级" align="center"></el-table-column>
          <el-table-column prop="currentAmount" label="余额" align="center"></el-table-column>
          <el-table-column prop="integral" label="积分" align="center" show-overflow-tooltip> </el-table-column>
          <el-table-column prop="storeName" label="注册门店" align="center"></el-table-column>
          <el-table-column prop="createTime" label="注册时间" align="center" width="150" :formatter="formatTimes"></el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button v-if="setRole('查看详情')" @click="routerlook(scope.row.memberId,scope.row.storeId,scope.row.id,scope.row.companyId)" type="text" size="small">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pageblock">
        <el-button size="small" class="topage" type="primary" @click="toPage">确定</el-button>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
        </el-pagination>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import {
  levelList,
  removeLevel,
  memberListPage,
  getHSSFWorkbook,
  leadMember,
  getMemberLevelList
} from "@/api";
import util from "@/util";
import s from "@/util/state";
export default {
  computed: mapState(["sub", "power", "merchantId", "linkName", "mobile"]),
  data() {
    return {
      file: "",
      loading: false,
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      input: "",

      tableData: [],
      multipleSelection: [],
      levelList: [],
      selectdata: {
        phone: "",
        level: [],
        regStore: ""
      },
      selectdatas: {
        phone: "",
        level: [],
        regStore: ""
      }
    };
  },
  mounted() {
    this.list(this.pageSize, 1); // 获取会员列表
    this._levelList(); // 获取会员等级列表
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.list(this.pageSize, this.currentPage); // 获取会员列表
          this._levelList(); // 获取会员等级列表
        }
      },
      deep: true
    }
  },
  methods: {
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    sex: s.sex,
    routerPush() {
      util.routerTo(
        "/operate-management/member-management/member-list/member-details"
      );
    },
    routerlook(memberId, storeId, id, companyId) {
      util.routerTo(
        "/operate-management/member-management/member-list/member-look",
        {
          memberId: memberId,
          storeId: storeId,
          id: id,
          companyId: companyId
        }
      );
    },
    formatTimes: function(row) {
      return util.foryear(row.createTime) + " " + util.fortime(row.createTime);
    },
    // 点击下载模板按钮
    donwloadMb() {
      let data = {
        orgId: this.merchantId
      };
      getHSSFWorkbook(data).then(res => {
        if (res.code == 200) {
          let xlsxUrl = res.data.showImg;
          let url = "";
          window.open((url = xlsxUrl));
        }
      });
    },
    // 上传文件
    uploading(event) {
      this.file = event.target.files[0]; //获取文件
      let formdata = new FormData();
      formdata.append("file", this.file);
      formdata.append("orgId", this.merchantId);
      this.loading = true;
      leadMember(formdata)
        .then(res => {
          if (res.code == "200") {
            // this.$refs.uploading.value = null;
            // this.loading = false;
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success"
            });
            this.list(this.pageSize, 1);
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
        })
        .catch(error => {});
    },
    _levelList() {
      let data = {
        orgId: this.merchantId
      };
      getMemberLevelList(data).then(res => {
        if (res.data != null) {
          this.levelList = res.data;
        }
      });
    },
    list(pageSize, pageNum) {
      let data = {
        phone: this.selectdatas.phone,
        levelId: this.selectdatas.level.toString(),
        storeName: this.selectdatas.regStore,
        pageNum: pageNum,
        pageSize: pageSize,
        companyId: this.merchantId
      };
      memberListPage(data).then(res => {
        this.tableData = res.data.list;
        this.currentPage=pageNum
        this.totalItems = parseInt(res.data.totalRecord);
      });
    },
    // 查询详情
    searchSelect() {
      this.selectdatas = this.selectdata;
      this.list(this.pageSize, this.currentPage);
    },
    handleClick(memberId, storeId, id, companyId) {
      this.$router.push({
        name: "datails",
        query: {
          memberId: memberId,
          storeId: storeId,
          id: id,
          companyId: companyId
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.list(val, 1);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.list(this.pageSize, val);
    },
    toPage() {
      this.list(this.pageSize, this.currentPage);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>
<style scoped>
.head-s {
  width: 100%;
  height: 50px;
  position: relative;
}
.head-to {
  width: 355px;
  position: absolute;
  top: 10px;
  left: 0px;
}

.head-p {
  width: 95px;
  height: 30px;
  line-height: 30px;
  color: #3a8ee6;
  position: absolute;
  border-radius: 8px;
  border: none;
  top: 18px;
  right: 240px;
}
.head-buttons {
  width: 95px;
  height: 30px;
  background: #999;
  position: absolute;
  border-radius: 8px;
  border: none;
  top: 18px;
  right: 140px;
}
.head-button {
  width: 95px;
  height: 30px;
  background: #999;
  position: absolute;
  border-radius: 8px;
  border: none;
  top: 18px;
  right: 30px;
}
.fonts {
  width: 100%;
  /*margin-top: 10px;*/
}
.file {
  position: relative;
  top: 8px;
  display: inline-block;
  background: #409eff;
  border: 1px solid #409eff;
  border-radius: 4px;
  padding: 4px 12px;
  margin: auto 10px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  text-indent: 0;
  line-height: 18px;
  font-size: 0.9em;
  cursor: pointer;
}
.file input {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}
.file:hover {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
</style>
